<style>
    ul li {
        list-style: none;
    }
    .cate{
        float: left;
        padding:5px 1rem;
        color: #fff;
    }
    .now{
        background: #fff;
        color: #2DAD5E;
    }
    .duihuan{
        position: absolute;
        top:2rem;right: 1rem;
    }
</style>
<?php
use yii\helpers\Url;
?>
<div style="background: #2DAD5E">
    <ul>
        <?php foreach ($cates as $v){?>
            <li class="cate <?=$now==$v['id']?'now':''?>" cate-id="<?=$v['id']?>"><?=$v['title']?></li>
        <?php }?>
        <li style="clear: both"></li>
    </ul>
</div>
<div class="weui-panel__bd" >
    <?php foreach ($items as $v){?>
    <div style="position: relative" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd">
            <img class="weui-media-box__thumb" src="<?=Yii::$app->params['img'].$v['img']?>">
        </div>
        <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title"><?=$v['title']?></h4>
            <p class="weui-media-box__desc">
                积分：<img style="width: 17px;display: inline;position: relative;top:2px" src="/assets/img/<?=$v['type']==1?"blue":"green"?>.png"><?=$v['price']?>&nbsp;&nbsp;&nbsp;&nbsp;库存：<?=$v['num']?>
            </p>

        </div>
        <a href="javascript:;" itemid="<?=$v['id']?>" class="weui-btn weui-btn_mini weui-btn_primary duihuan">兑换</a>
    </div>
    <?php }?>
</div>

<script>
    $(".duihuan").click(function () {
        var r=confirm("确定兑换该商品？")
        if (r==true)
        {
            var id = $(this).attr("itemid");
            $.ajax({
                url:"<?=Url::to(['customer/pay'])?>",
                data:"id="+id,
                type:'post',
                dataType:'json',
                success:function(data){
                    if(data.status){
                        alert("兑换成功")
                        window.location.href="<?=Url::to(['customer/index'])?>";
                    }else{
                        alert(data.msg);
                    }
                },
                error:function(){
                    alert("系统繁忙");
                }
            })
        }
    })

    
</script>